/**
* 选择人员技术档案
*/
<template>
    <vp-dialog ref="editDialogRef" :span="2">
        <template #title>
            <vp-label zh="选择人员技术档案" en="Select Customer" />
        </template>
        <vp-card class="mb5">
            <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                label-width="120px">
                <vp-search-row :show-more="showMore">
                    <vp-search-col>
                        <el-form-item field="keyword">
                            <template #label><vp-label zh="姓名" en="Name" /></template>
                            <el-input v-model="searchForm.keyword" v-trim placeholder="" clearable></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item field="zzzt">
                            <template #label><vp-label zh="在职状态" en="Employed status" /></template>
                            <el-select class="w100" v-model="searchForm.zzzt" placeholder="请选择/Please Choose" clearable
                                collapse-tags>
                                <el-option :value="10" label="在职/Employed"></el-option>
                                <el-option :value="20" label="离职/Resign"></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <vp-table :data="tableData" @current-change="handleCurrentChange" ref="tableRef" highlight-current-row
                row-key="id">
                <el-table-column type="index" align="center" label="#">
                </el-table-column>
                <el-table-column prop="bh" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="编号" en="No." /></template>
                </el-table-column>
                <el-table-column prop="xm" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="姓名" en="Name" /></template>
                </el-table-column>
                <el-table-column prop="xb" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="性别" en="Gender" /></template>
                    <template #default="scope">
                        {{ scope.row.xb === 10 ? '男/Male' : (scope.row.xb === 20 ? '女/Female' : '') }}
                    </template>
                </el-table-column>
                <el-table-column prop="rhrq" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="入行日期" en="Industry Date" /></template>
                </el-table-column>
                <el-table-column prop="rzrq" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="入职日期" en="Employment Date" /></template>
                </el-table-column>
                <el-table-column prop="xrzw" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="现任职务" en="Current Position" /></template>
                </el-table-column>
                <el-table-column prop="bm" min-width="150" show-overflow-tooltip>
                    <template #header><vp-label zh="部门" en="Dept." /></template>
                </el-table-column>
            </vp-table>
            <vp-pagination background class="mt5" layout="prev, pager, next, total" :total="page.total"
                v-model:currentPage="page.pageNum" v-model:pageSize="page.pageSize" :hide-on-single-page="false">
            </vp-pagination>
        </vp-card>
        <template #footer>
            <vp-btn-empty @click="handleClear" />
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>

<script setup lang="ts" name="VpPersonnelFileDialog">
import { reactive, ref, watch } from 'vue';
import { DIALOG_PAGE } from '/@/utils/page';
import request from '/@/utils/request';

const searchForm = ref({
    keyword: "",
    zzzt: null,
});

const page = reactive({
    ...DIALOG_PAGE,
});

const tableData = ref([]);
const loading = ref(false);
const callback = ref((data: any) => { });

const tableRef = ref();
const editDialogRef = ref();
const searchFormRef = ref();
const currentRow = ref({});
const showMore = ref(false);
const selected = ref('');


const handleOpen = (param: any) => {
    editDialogRef.value.handleOpen();
    currentRow.value = {};
    selected.value = param.selected || '';
    if (param.callback && typeof param.callback === "function") {
        callback.value = param.callback;
    }
    loadDataList();
}

watch(() => page.pageNum, () => {
    loadDataList();
})

const loadDataList = () => {
    loading.value = true;
    request.get('/training/personnelFile/queryPage', {
        params: {
            ...searchForm.value,
            ...page,
        }
    }).then(res => {
        tableData.value = res?.data?.list || [];
        page.total = res?.data?.total || 0;
        page.pageNum = res?.data?.pageNum || 1;
        const currentRow = tableData.value.find((obj: any) => { return obj.id === selected.value });
        if (currentRow) {
            tableRef.value.setCurrentRow(currentRow);
        }
    }).finally(() => {
        loading.value = false;
    })
}


const handleSearchReset = () => {
    searchFormRef.value.resetFields();
}

const handleCurrentChange = (val: any) => {
    currentRow.value = val;
}

const handleSave = () => {
    if (loading.value) {
        return;
    }
    callback.value(currentRow.value);
    editDialogRef.value.handleClose();
}
const handleClear = () => {
    if (loading.value) {
        return;
    }
    callback.value({});
    editDialogRef.value.handleClose();
}


defineExpose({
    handleOpen
})
</script>
